<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
  <meta name="theme-color" content="#000000"/>
  <title>人码合一 - Louis Han</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            'tech-blue': '#0080ff',
            'tech-red': '#ff0040',
            'dark-bg': '#000000',
            'dark-surface': '#0a0a0a',
            'dark-card': '#111111',
          }
        },
      },
    }
  </script>

  <style>
    pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.codehilite .hll { background-color: #ffffcc }
.codehilite { background: #f8f8f8; }
.codehilite .c { color: #3D7B7B; font-style: italic } /* Comment */
.codehilite .err { border: 1px solid #F00 } /* Error */
.codehilite .k { color: #008000; font-weight: bold } /* Keyword */
.codehilite .o { color: #666 } /* Operator */
.codehilite .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
.codehilite .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
.codehilite .cp { color: #9C6500 } /* Comment.Preproc */
.codehilite .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
.codehilite .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
.codehilite .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
.codehilite .gd { color: #A00000 } /* Generic.Deleted */
.codehilite .ge { font-style: italic } /* Generic.Emph */
.codehilite .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.codehilite .gr { color: #E40000 } /* Generic.Error */
.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.codehilite .gi { color: #008400 } /* Generic.Inserted */
.codehilite .go { color: #717171 } /* Generic.Output */
.codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.codehilite .gs { font-weight: bold } /* Generic.Strong */
.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.codehilite .gt { color: #04D } /* Generic.Traceback */
.codehilite .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.codehilite .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.codehilite .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.codehilite .kp { color: #008000 } /* Keyword.Pseudo */
.codehilite .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.codehilite .kt { color: #B00040 } /* Keyword.Type */
.codehilite .m { color: #666 } /* Literal.Number */
.codehilite .s { color: #BA2121 } /* Literal.String */
.codehilite .na { color: #687822 } /* Name.Attribute */
.codehilite .nb { color: #008000 } /* Name.Builtin */
.codehilite .nc { color: #00F; font-weight: bold } /* Name.Class */
.codehilite .no { color: #800 } /* Name.Constant */
.codehilite .nd { color: #A2F } /* Name.Decorator */
.codehilite .ni { color: #717171; font-weight: bold } /* Name.Entity */
.codehilite .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
.codehilite .nf { color: #00F } /* Name.Function */
.codehilite .nl { color: #767600 } /* Name.Label */
.codehilite .nn { color: #00F; font-weight: bold } /* Name.Namespace */
.codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */
.codehilite .nv { color: #19177C } /* Name.Variable */
.codehilite .ow { color: #A2F; font-weight: bold } /* Operator.Word */
.codehilite .w { color: #BBB } /* Text.Whitespace */
.codehilite .mb { color: #666 } /* Literal.Number.Bin */
.codehilite .mf { color: #666 } /* Literal.Number.Float */
.codehilite .mh { color: #666 } /* Literal.Number.Hex */
.codehilite .mi { color: #666 } /* Literal.Number.Integer */
.codehilite .mo { color: #666 } /* Literal.Number.Oct */
.codehilite .sa { color: #BA2121 } /* Literal.String.Affix */
.codehilite .sb { color: #BA2121 } /* Literal.String.Backtick */
.codehilite .sc { color: #BA2121 } /* Literal.String.Char */
.codehilite .dl { color: #BA2121 } /* Literal.String.Delimiter */
.codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.codehilite .s2 { color: #BA2121 } /* Literal.String.Double */
.codehilite .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
.codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */
.codehilite .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
.codehilite .sx { color: #008000 } /* Literal.String.Other */
.codehilite .sr { color: #A45A77 } /* Literal.String.Regex */
.codehilite .s1 { color: #BA2121 } /* Literal.String.Single */
.codehilite .ss { color: #19177C } /* Literal.String.Symbol */
.codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */
.codehilite .fm { color: #00F } /* Name.Function.Magic */
.codehilite .vc { color: #19177C } /* Name.Variable.Class */
.codehilite .vg { color: #19177C } /* Name.Variable.Global */
.codehilite .vi { color: #19177C } /* Name.Variable.Instance */
.codehilite .vm { color: #19177C } /* Name.Variable.Magic */
.codehilite .il { color: #666 } /* Literal.Number.Integer.Long */

    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #000;
      color: #e5e5e5;
    }

    /* 简单边框 */
    .tech-border {
      border: 1px solid rgba(0, 128, 255, 0.2);
    }

    /* 导航链接 */
    .nav-link {
      position: relative;
      color: #888;
      transition: color 0.3s;
      text-decoration: none;
    }

    .nav-link:hover {
      color: #0080ff;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 1px;
      background: #0080ff;
      transition: width 0.3s;
    }

    .nav-link:hover::after {
      width: 100%;
    }

    /* 移动端菜单 */
    .mobile-menu {
      transform: translateX(100%);
      transition: transform 0.3s ease;
    }

    .mobile-menu.active {
      transform: translateX(0);
    }

    /* 移动端导航链接 */
    .mobile-nav-link {
      display: block;
      padding: 0.75rem 0;
      color: #d1d5db;
      text-decoration: none;
      transition: color 0.2s;
      font-weight: 500;
    }

    .mobile-nav-link:hover {
      color: #0080ff;
    }

    /* 滚动条 */
    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-track {
      background: #111;
    }

    ::-webkit-scrollbar-thumb {
      background: #333;
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #444;
    }

    /* 代码高亮优化 */
    .highlight {
      background: #0a0a0a;
      border: 1px solid #222;
      border-radius: 8px;
      padding: 1rem;
      overflow-x: auto;
    }

    .highlight pre {
      margin: 0;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.875rem;
      line-height: 1.5;
    }
  </style>
</head>

<body class="min-h-screen bg-dark-bg">
  <!-- 导航栏 -->
  <header class="sticky top-0 z-40 bg-dark-surface/95 backdrop-blur-sm border-b tech-border">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">
      <div class="flex items-center justify-between h-16">
        <!-- Logo -->
        <a href="/" class="flex items-center space-x-3">
          <div class="w-10 h-10 bg-tech-blue rounded-lg flex items-center justify-center">
            <span class="font-mono font-bold text-white">LH</span>
          </div>
          <span class="font-bold text-xl text-white hidden sm:block">louishwh</span>
        </a>

        <!-- 桌面端导航 -->
        <nav class="hidden md:flex items-center space-x-8">
            <a href="/" class="nav-link">Author</a>
            <a href="/blog" class="nav-link">Blogs</a>
            <a href="/projects" class="nav-link">Projects</a>

<!--          <a href="/books" class="nav-link">Books</a>-->
<!--          <a href="/papers" class="nav-link">Papers</a>-->
<!--          <a href="/companies" class="nav-link">Companies</a>-->
<!--            <a href="/showcase" class="nav-link">Showcase</a>-->
            <a href="/contact" class="nav-link">Contact</a>
        </nav>

        <!-- 移动端菜单按钮 -->
        <button id="menu-btn" class="md:hidden p-2 text-gray-400 hover:text-white">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="mobile-menu fixed top-16 right-0 bottom-0 w-64 bg-dark-surface border-l tech-border md:hidden">
      <nav class="p-6 space-y-1">
        <a href="/" class="mobile-nav-link">Author</a>
          <a href="/blog" class="mobile-nav-link">Blogs</a>
        <a href="/projects" class="mobile-nav-link">Projects</a>
<!--        <a href="/books" class="mobile-nav-link">Books</a>-->
<!--        <a href="/papers" class="mobile-nav-link">Papers</a>-->
<!--        <a href="/companies" class="mobile-nav-link">Companies</a>-->
<!--        <a href="/showcase" class="mobile-nav-link">Showcase</a>-->
        <a href="/contact" class="mobile-nav-link">Contact</a>
      </nav>
    </div>
  </header>

  <!-- 主内容 -->
  <main class="min-h-screen">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 py-12">
      
<div class="max-w-6xl mx-auto">
  <!-- 返回导航 -->
  <div class="mb-8">
    <a href="/companies" class="inline-flex items-center text-gray-400 hover:text-white transition-colors">
      <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
      </svg>
      返回公司列表
    </a>
  </div>

  <article class="bg-dark-card rounded-lg tech-border overflow-hidden">
    <!-- 公司头部 -->
    <header class="relative p-8 pb-6">
      <!-- 背景装饰 -->
      <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-tech-blue/10 to-transparent rounded-bl-full"></div>

      <div class="relative">
        <!-- 公司标题 -->
        <h1 class="text-3xl lg:text-4xl font-bold text-white mb-6 leading-tight">深圳市进汇科技（华通证券）</h1>

        <!-- 公司元数据 -->
        <div class="flex flex-wrap items-center gap-6 mb-8">
          <!-- 公司简称 -->
          
          <div class="flex items-center">
            <svg class="w-5 h-5 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"/>
            </svg>
            <span class="text-gray-300 font-medium">WatonGroup</span>
          </div>
          

          <!-- 公司网站 -->
          
          <div class="flex items-center">
            <svg class="w-5 h-5 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
            </svg>
            <a href="https://waton.com" target="_blank" class="text-tech-blue hover:underline">
              访问官网
            </a>
          </div>
          

          <!-- 项目数量 -->
          <div class="flex items-center">
            <svg class="w-5 h-5 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
            </svg>
            <span class="text-gray-300 font-medium">25 个项目</span>
          </div>
        </div>
      </div>
    </header>

    <!-- 公司内容 -->
    <div class="px-8 pb-8">
      <div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
        <!-- 主要内容 -->
        <div class="xl:col-span-2 space-y-8">
          <!-- 公司描述 -->
          

          <!-- 相关项目 -->
          
          <section>
            <h2 class="text-2xl font-bold text-white mb-6">相关项目</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              
              <article class="group">
                <a href="/projects/trader-wtf" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      TraderWTF AI量化交易系统
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">一个基于AI的量化交易系统，旨在通过算法和数据分析为用户提供交易信号和投资建议。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2025-06-01</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Python
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Golang
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +6
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/ai-broker" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      AIBroker AI决策平台
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">一个AI驱动的投资决策平台，整合了量化分析、智能投顾和信息聚合功能。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2025-05-01</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Python
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          FastAPI
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +3
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/golden-road-project" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      GoldenRoad项目
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">一个使用Rust语言开发的高性能系统项目，包含消息系统、决策系统等核心组件。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2024-12-01</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Rust
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          WebSocket
                        </span>
                        
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/llm-0-to-1" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      从零到一训练大模型项目
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">一个从零开始构建大语言模型的研究项目，探索大模型的底层原理和实现方法。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2024-10-01</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Python
                        </span>
                        
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/ai-public-opinion-monitoring" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      AI舆情监控项目
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">一个AI舆情监控项目，能够自动监控和分析舆情并生成报告。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2024-09-01</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Python
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          FastAPI
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +1
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/wealth-broker-project" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      Wealth Broker项目
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">一个金融领域的AI项目，主要功能是对金融新闻进行分析并生成报告。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2024-06-01</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Python
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          FastAPI
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +2
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/descart-project" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      DescartCan
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">一个个人AI助手项目，旨在为用户提供智能化的个人助理服务。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2024-03-01</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Python
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          FastAPI
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +4
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/ai-secretary" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      AI董秘
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">AI董秘</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2024-03-01</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Python
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          FastAPI
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +4
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/new-risk-control-system" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      新版风控系统
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">新版风控系统是华通国际的重要升级项目，包含分级通知、统计报表和风控推送等核心功能，显著提升了风险管控能力。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2023-10-01</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Java
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          SpringBoot
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +3
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/securities-cloud-management-system" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      券商云管理系统
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">券商云管理系统是华通国际的核心管理平台，支持多个券商云项目的统一管理，包含权限管理和模板管理等核心功能。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2023-09-01</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Java
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          SpringBoot
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +3
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/peaches-education" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      桃子教育
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">桃子教育项目是一个教育类应用，包含完整的教育平台功能，成功在2023年8月18日上线，并在各大应用商店上架。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2023-08-18</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Java
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          SpringBoot
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +3
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/ai-system-research" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      AI系统研究
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">AI系统研究项目涵盖了AI客服、AI视频工具和稳定扩散模型等多个方向的研究和实践，为公司在AI领域的应用奠定了基础。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2023-08-01</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Python
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          PyTorch
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +3
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/aws-product-listing" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      AWS产品上架
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">AWS产品上架项目成功将Waton Cloud H5产品上架到AWS Marketplace，并实现了云产品的动态配置管理功能。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2023-08-01</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          AWS
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Cloud
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +1
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/huatong-3.0-upgrade" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      华通3.0升级
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">华通3.0升级项目是对华通国际交易系统的重大升级，包括接口优化、错误处理完善等功能，于2023年8月底成功上线。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2023-08-01</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Java
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          SpringBoot
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +3
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/cun-gu-sheng-xi" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      存股生息服务
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">为证券业务设计和开发的存股生息服务系统，用户可将持有的股票存入获取利息收益。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2022-09</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Java
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          SpringBoot
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +1
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/qu-dao-tong-ji" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      渠道统计系统
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">为公司业务设计和开发的渠道统计和分佣系统，支持复杂的渠道关系管理和分佣计算。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2022-07</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Java
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          SpringBoot
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +2
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/chou-jiang-xi-tong" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      抽奖系统
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">为公司营销活动设计和开发的抽奖系统，支持多种触发条件和丰富的奖品类型。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2022-06</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Java
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          SpringBoot
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +2
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/bang-zhu-zhong-xin" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      帮助中心
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">为公司产品设计和开发的帮助中心系统，为用户提供产品使用指导和问题解答。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2022-04</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Java
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          SpringBoot
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +1
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/xiao-xi-zhong-xin" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      消息中心
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">为公司业务系统设计和开发的消息中心平台，支持多种消息推送方式和灵活的配置管理。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2022-02</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Java
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          SpringBoot
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +2
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/gao-ji-hang-qing" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      高级行情服务
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">为证券业务设计和开发的高级行情服务系统，用户可购买获取更详细的行情数据。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2022-01</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Java
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          SpringBoot
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +1
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/data-crawler-project" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      数据爬虫项目
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">一个用于从互联网抓取财经新闻、新股数据和暗盘信息的系列爬虫项目。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2020-11-09</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Python
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Scrapy
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +2
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/lending-and-credit-project" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      借贷与信贷项目
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">参与公司在借贷和信贷方向新业务的初期技术探索和项目开发。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2020-09-07</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Java
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          SpringBoot
                        </span>
                        
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/monitor-system" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      Monitor-监控系统
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">一个用于监控公司各项核心服务健康状况的自动化系统，能够在服务异常时及时发出警报。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2020-05-14</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Java
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          SpringBoot
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +1
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/adrobot-wechat-marketing-bot" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      AdRobot - 微信推广机器人
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">一个基于微信生态的自动化营销机器人，能够定时、定点、定群地推送新股等营销信息。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2020-04-13</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Java
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          SpringBoot
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +3
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
              <article class="group">
                <a href="/projects/huatong-app" class="block h-full">
                  <div class="h-full bg-gray-900/50 rounded-lg p-5 border border-gray-800 transition-all hover:border-tech-blue/50">
                    <h3 class="text-lg font-semibold text-white mb-2 group-hover:text-tech-blue transition-colors line-clamp-2">
                      华通证券App
                    </h3>
                    
                    <p class="text-sm text-gray-400 mb-3 line-clamp-2">一款功能全面的港美股证券交易App，您作为核心开发者，深度参与了其iOS端和后端服务的整个生命周期。</p>
                    
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-gray-500">2020-02-01</span>
                      
                      <div class="flex flex-wrap gap-1">
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          Swift
                        </span>
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          RxSwift
                        </span>
                        
                        
                        <span class="px-1.5 py-0.5 bg-gray-800 text-gray-400 text-xs rounded">
                          +6
                        </span>
                        
                      </div>
                      
                    </div>
                  </div>
                </a>
              </article>
              
            </div>
          </section>
          
        </div>

        <!-- 侧边栏信息 -->
        <div class="space-y-6">
          <!-- 公司信息 -->
          <div class="bg-gray-900/50 rounded-lg p-6 border border-gray-800">
            <div class="flex items-center mb-4">
              <svg class="w-5 h-5 mr-2 text-tech-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"/>
              </svg>
              <h3 class="text-lg font-semibold text-white">公司信息</h3>
            </div>
            <div class="space-y-3">
              <div class="flex justify-between">
                <span class="text-gray-500 text-sm">公司名称</span>
                <span class="text-white text-sm">深圳市进汇科技（华通证券）</span>
              </div>
              
              <div class="flex justify-between">
                <span class="text-gray-500 text-sm">简称</span>
                <span class="text-white text-sm">WatonGroup</span>
              </div>
              
              <div class="flex justify-between">
                <span class="text-gray-500 text-sm">项目数量</span>
                <span class="text-white text-sm">25</span>
              </div>
              
              <div class="flex justify-between">
                <span class="text-gray-500 text-sm">官网</span>
                <a href="https://waton.com" target="_blank" class="text-tech-blue text-sm hover:underline">
                  访问
                </a>
              </div>
              
            </div>
          </div>

          <!-- 项目统计 -->
          
          <div class="bg-gray-900/50 rounded-lg p-6 border border-gray-800">
            <div class="flex items-center mb-4">
              <svg class="w-5 h-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
              </svg>
              <h3 class="text-lg font-semibold text-white">项目统计</h3>
            </div>
            <div class="space-y-3">
              <div class="flex justify-between">
                <span class="text-gray-500 text-sm">总项目数</span>
                <span class="text-white text-sm">25</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-500 text-sm">已完成</span>
                <span class="text-white text-sm">
                  23
                </span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-500 text-sm">进行中</span>
                <span class="text-white text-sm">
                  2
                </span>
              </div>
            </div>
          </div>
          

          <!-- 技术栈 -->
          
          <div class="bg-gray-900/50 rounded-lg p-6 border border-gray-800">
            <div class="flex items-center mb-4">
              <svg class="w-5 h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
              </svg>
              <h3 class="text-lg font-semibold text-white">技术栈</h3>
            </div>
            <div class="flex flex-wrap gap-2">
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                AWS
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                ChatGLM
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                Cloud
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                Excel
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                FastAPI
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                Golang
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                HS3.0
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                Java
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                JavaScript
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                Kafka
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                Kotlin
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                LangChain
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                Moya
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                MySQL
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                NATS
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                Nacos
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                Neo4j
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                OSS
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                Objective-C
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                PyTorch
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                Python
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                Qdrant
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                Qlib
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                RAG
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                Redis
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                Rust
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                RxSwift
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                Scrapy
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                Seata
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                SpringBoot
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                StableDiffusion
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                Swift
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                WebSocket
              </span>
              
              <span class="inline-flex items-center px-3 py-1.5 bg-gray-800 text-gray-300 rounded-lg text-sm font-medium border border-gray-700">
                <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
                微服务
              </span>
              
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </article>
</div>

<!-- 添加样式 -->
<style>
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 项目卡片悬停效果 */
  .group:hover .border {
    border-color: rgba(0, 128, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 128, 255, 0.1);
  }
</style>

    </div>
  </main>

  <!-- 页脚 -->
  <footer class="border-t tech-border mt-20">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 py-12">
      <!-- 信息卡片组 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">

        <!-- 品牌卡片 -->
        <div class="bg-dark-card rounded-lg p-6 tech-border text-center">
          <h3 class="text-2xl font-bold text-white mb-2">人码合一</h3>
          <p class="text-sm text-gray-400">HUMAN CODE UNITY</p>
        </div>
        
        <!-- 状态卡片 -->
        <div class="bg-dark-card rounded-lg p-6 tech-border">
          <h4 class="text-sm font-mono text-gray-400 mb-3">SYSTEM STATUS</h4>
          <div class="space-y-2 text-sm">
            <div class="flex justify-between">
              <span class="text-gray-500">Version</span>
              <span class="font-mono text-tech-blue">v3.0.1</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-500">Status</span>
              <span class="font-mono text-green-500">ONLINE</span>
            </div>
          </div>
        </div>

        <!-- 社交卡片 -->
        <div class="bg-dark-card rounded-lg p-6 tech-border">
          <h4 class="text-sm font-mono text-gray-400 mb-3">CONNECT</h4>
          <div class="flex space-x-4">
            <a href="https://github.com/louishan" class="text-gray-400 hover:text-white transition-colors">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
              </svg>
            </a>
            <a href="https://twitter.com/louishan" class="text-gray-400 hover:text-white transition-colors">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
              </svg>
            </a>
            <a href="https://linkedin.com/in/louishan" class="text-gray-400 hover:text-white transition-colors">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
              </svg>
            </a>
            <a href="mailto:louis@example.com" class="text-gray-400 hover:text-white transition-colors">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="flex flex-col md:flex-row items-center justify-between pt-8 border-t border-gray-800">
        <div class="flex items-center space-x-4 mb-4 md:mb-0">
          <span class="text-sm text-gray-500">© 2025 Louis Han</span>
          <span class="text-sm text-gray-500">|</span>
          <span class="text-sm text-gray-500">人码合一</span>
        </div>

        <div class="flex items-center space-x-4 text-xs text-gray-600">
          <span>Built with ❤️</span>
        </div>
      </div>
    </div>
  </footer>

  <script>
    // 移动端菜单控制
    const menuBtn = document.getElementById('menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
        let isMenuOpen = false;

    menuBtn.addEventListener('click', () => {
      isMenuOpen = !isMenuOpen;
      mobileMenu.classList.toggle('active', isMenuOpen);
      document.body.style.overflow = isMenuOpen ? 'hidden' : '';
    });

    // 点击菜单外关闭
    document.addEventListener('click', (e) => {
      if (isMenuOpen && !mobileMenu.contains(e.target) && !menuBtn.contains(e.target)) {
        isMenuOpen = false;
        mobileMenu.classList.remove('active');
        document.body.style.overflow = '';
      }
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        }
      });
    });

    // 页面加载完成后添加淡入效果
    window.addEventListener('load', () => {
      document.body.style.opacity = '1';
    });
  </script>

  <style>
    /* 初始状态 */
    body {
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    /* 打印样式 */
    @media print {
      header, footer {
        display: none !important;
      }

      body {
        background: white !important;
        color: black !important;
      }

      .tech-border {
        border-color: #ddd !important;
      }
    }

    /* 响应式优化 */
    @media (max-width: 640px) {
      .highlight {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
      }
    }
  </style>
</body>
</html>